<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多功能工具集 - 专业在线工具平台</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap">
    <link rel="stylesheet" href="styles.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
</head>
<body>
    <div class="theme-switch">
        <i class="fas fa-moon"></i>
        <label class="switch">
            <input type="checkbox" id="themeToggle">
            <span class="slider round"></span>
        </label>
        <i class="fas fa-sun"></i>
    </div>

    <div class="container">
        <header class="main-header">
            <h1><i class="fas fa-tools"></i> 多功能工具集</h1>
            <p class="subtitle">一站式在线工具平台，为您提供专业的单位换算、计算器、日期计算等功能</p>
        </header>
        
        <nav class="tools-nav">
            <button class="tool-btn active" data-tool="converter">
                <i class="fas fa-exchange-alt"></i> 单位换算
            </button>
            <button class="tool-btn" data-tool="calculator">
                <i class="fas fa-calculator"></i> 计算器
            </button>
            <button class="tool-btn" data-tool="date">
                <i class="fas fa-calendar-alt"></i> 日期计算
            </button>
            <button class="tool-btn" data-tool="color">
                <i class="fas fa-palette"></i> 颜色工具
            </button>
            <button class="tool-btn" data-tool="text">
                <i class="fas fa-font"></i> 文本工具
            </button>
            <button class="tool-btn" data-tool="ai">
                <i class="fas fa-robot"></i> AI 助手
            </button>
            <button class="tool-btn" data-tool="translation">
                <i class="fas fa-language"></i> 翻译工具
            </button>
            <button class="tool-btn" data-tool="games">
                <i class="fas fa-gamepad"></i> 小游戏
            </button>
            <button class="tool-btn" data-tool="tools">
                <i class="fas fa-toolbox"></i> 实用工具
            </button>
            <button class="tool-btn" data-tool="about">
                <i class="fas fa-info-circle"></i> 关于我们
            </button>
        </nav>

        <!-- 单位换算工具 -->
        <div class="tool-section active" id="converter">
            <div class="section-header">
                <h2><i class="fas fa-exchange-alt"></i> 单位换算</h2>
                <p class="section-description">支持长度、温度、重量、面积、体积和货币等多种单位换算</p>
            </div>

            <div class="conversion-type">
                <button class="type-btn active" data-type="length">
                    <i class="fas fa-ruler"></i> 长度
                </button>
                <button class="type-btn" data-type="temperature">
                    <i class="fas fa-temperature-high"></i> 温度
                </button>
                <button class="type-btn" data-type="weight">
                    <i class="fas fa-weight-hanging"></i> 重量
                </button>
                <button class="type-btn" data-type="area">
                    <i class="fas fa-vector-square"></i> 面积
                </button>
                <button class="type-btn" data-type="volume">
                    <i class="fas fa-cube"></i> 体积
                </button>
                <button class="type-btn" data-type="currency">
                    <i class="fas fa-money-bill-wave"></i> 货币
                </button>
            </div>

            <div class="conversion-form">
                <div class="input-group">
                    <input type="number" id="fromValue" placeholder="输入数值">
                    <select id="fromUnit"></select>
                </div>
                
                <div class="swap-btn" title="交换单位">
                    <i class="fas fa-exchange-alt"></i>
                </div>

                <div class="input-group">
                    <input type="number" id="toValue" readonly>
                    <select id="toUnit"></select>
                </div>
            </div>

            <div class="unit-visualization">
                <div class="visual-container">
                    <div class="visual-from">
                        <div class="visual-value" id="visualFromValue">0</div>
                        <div class="visual-unit" id="visualFromUnit">米</div>
                    </div>
                    <div class="visual-arrow">
                        <i class="fas fa-arrow-right"></i>
                    </div>
                    <div class="visual-to">
                        <div class="visual-value" id="visualToValue">0</div>
                        <div class="visual-unit" id="visualToUnit">厘米</div>
                    </div>
                </div>
            </div>

            <div class="history-section">
                <div class="history-header">
                    <h3><i class="fas fa-history"></i> 历史记录</h3>
                    <button id="clearHistory" class="clear-btn" title="清除历史记录">
                        <i class="fas fa-trash"></i> 清除历史
                    </button>
                </div>
                <ul id="historyList"></ul>
            </div>
        </div>

        <!-- 计算器工具 -->
        <div class="tool-section" id="calculator">
            <div class="section-header">
                <h2><i class="fas fa-calculator"></i> 计算器</h2>
                <p class="section-description">支持基础运算、百分比计算和正负号切换等功能</p>
            </div>

            <div class="calculator">
                <div class="calc-display">
                    <input type="text" id="calcInput" readonly>
                </div>
                <div class="calc-buttons">
                    <button class="calc-btn" data-action="clear" title="清除">C</button>
                    <button class="calc-btn" data-action="backspace" title="退格">⌫</button>
                    <button class="calc-btn" data-action="percent" title="百分比">%</button>
                    <button class="calc-btn operator" data-action="divide" title="除法">÷</button>
                    
                    <button class="calc-btn" data-action="number">7</button>
                    <button class="calc-btn" data-action="number">8</button>
                    <button class="calc-btn" data-action="number">9</button>
                    <button class="calc-btn operator" data-action="multiply" title="乘法">×</button>
                    
                    <button class="calc-btn" data-action="number">4</button>
                    <button class="calc-btn" data-action="number">5</button>
                    <button class="calc-btn" data-action="number">6</button>
                    <button class="calc-btn operator" data-action="subtract" title="减法">-</button>
                    
                    <button class="calc-btn" data-action="number">1</button>
                    <button class="calc-btn" data-action="number">2</button>
                    <button class="calc-btn" data-action="number">3</button>
                    <button class="calc-btn operator" data-action="add" title="加法">+</button>
                    
                    <button class="calc-btn" data-action="number">0</button>
                    <button class="calc-btn" data-action="decimal" title="小数点">.</button>
                    <button class="calc-btn" data-action="plusminus" title="正负号">±</button>
                    <button class="calc-btn operator" data-action="equals" title="等于">=</button>
                </div>
            </div>
        </div>

        <!-- 日期计算工具 -->
        <div class="tool-section" id="date">
            <div class="section-header">
                <h2><i class="fas fa-calendar-alt"></i> 日期计算</h2>
                <p class="section-description">计算日期差、工作日和快速日期调整</p>
            </div>

            <div class="date-calculator">
                <div class="date-inputs">
                    <div class="date-group">
                        <label>开始日期</label>
                        <input type="date" id="startDate">
                    </div>
                    <div class="date-group">
                        <label>结束日期</label>
                        <input type="date" id="endDate">
                    </div>
                </div>
                <div class="date-results">
                    <div class="result-item">
                        <span class="result-label">相差天数：</span>
                        <span class="result-value" id="daysDiff">0</span>
                    </div>
                    <div class="result-item">
                        <span class="result-label">工作日：</span>
                        <span class="result-value" id="workDays">0</span>
                    </div>
                    <div class="result-item">
                        <span class="result-label">周数：</span>
                        <span class="result-value" id="weeksDiff">0</span>
                    </div>
                </div>
                <div class="date-actions">
                    <button id="addDays" class="date-btn" title="添加一天">
                        <i class="fas fa-plus"></i> 添加天数
                    </button>
                    <button id="subtractDays" class="date-btn" title="减少一天">
                        <i class="fas fa-minus"></i> 减去天数
                    </button>
                </div>
            </div>

            <!-- 纪念日倒数日功能区 -->
            <div class="anniversary-section" style="margin-top:2.5rem;">
                <div class="section-header">
                    <h3><i class="fas fa-heart"></i> 纪念日倒数日</h3>
                    <p class="section-description">添加重要纪念日，自动计算距离下次纪念日还有多少天</p>
                </div>
                <form id="anniversaryForm" style="display:flex;gap:1rem;align-items:center;justify-content:center;margin-bottom:1.5rem;flex-wrap:wrap;">
                    <input type="text" id="anniversaryName" placeholder="纪念日名称" required style="max-width:160px;">
                    <input type="date" id="anniversaryDate" required>
                    <button type="submit" class="date-btn" style="min-width:90px;"><i class="fas fa-plus"></i> 添加</button>
                </form>
                <ul id="anniversaryList" style="list-style:none;padding:0;max-width:500px;margin:0 auto;"></ul>
            </div>
        </div>

        <!-- 颜色工具 -->
        <div class="tool-section" id="color">
            <div class="section-header">
                <h2><i class="fas fa-palette"></i> 颜色工具</h2>
                <p class="section-description">颜色选择、格式转换和配色方案生成</p>
            </div>

            <div class="color-tools">
                <div class="color-picker">
                    <input type="color" id="colorInput" value="#3498db">
                    <div class="color-values">
                        <div class="color-value">
                            <label>HEX</label>
                            <input type="text" id="hexValue" readonly>
                        </div>
                        <div class="color-value">
                            <label>RGB</label>
                            <input type="text" id="rgbValue" readonly>
                        </div>
                        <div class="color-value">
                            <label>HSL</label>
                            <input type="text" id="hslValue" readonly>
                        </div>
                    </div>
                </div>
                <div class="color-palette">
                    <h3>推荐配色</h3>
                    <div class="palette-grid" id="colorPalette"></div>
                </div>
            </div>
        </div>

        <!-- 文本工具 -->
        <div class="tool-section" id="text">
            <div class="section-header">
                <h2><i class="fas fa-font"></i> 文本工具</h2>
                <p class="section-description">文本格式转换、统计和编辑功能</p>
            </div>

            <div class="text-tools">
                <div class="text-input">
                    <textarea id="textInput" placeholder="在此输入文本..."></textarea>
                </div>
                <div class="text-actions">
                    <button class="text-btn" data-action="uppercase" title="转换为大写">
                        <i class="fas fa-font"></i> 转大写
                    </button>
                    <button class="text-btn" data-action="lowercase" title="转换为小写">
                        <i class="fas fa-font"></i> 转小写
                    </button>
                    <button class="text-btn" data-action="capitalize" title="首字母大写">
                        <i class="fas fa-font"></i> 首字母大写
                    </button>
                    <button class="text-btn" data-action="reverse" title="反转文本">
                        <i class="fas fa-exchange-alt"></i> 反转文本
                    </button>
                    <button class="text-btn" data-action="count" title="统计字数">
                        <i class="fas fa-calculator"></i> 字数统计
                    </button>
                    <button class="text-btn" data-action="clear" title="清空文本">
                        <i class="fas fa-trash"></i> 清空
                    </button>
                </div>
                <div class="text-stats">
                    <div class="stat-item">
                        <span class="stat-label">字符数：</span>
                        <span class="stat-value" id="charCount">0</span>
                    </div>
                    <div class="stat-item">
                        <span class="stat-label">单词数：</span>
                        <span class="stat-value" id="wordCount">0</span>
                    </div>
                    <div class="stat-item">
                        <span class="stat-label">行数：</span>
                        <span class="stat-value" id="lineCount">0</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- AI 助手工具 -->
        <div class="tool-section" id="ai">
            <div class="section-header">
                <h2><i class="fas fa-robot"></i> AI 助手</h2>
                <p class="section-description">基于 DeepSeek 的智能问答系统，为您提供专业的解答</p>
            </div>

            <div class="ai-chat">
                <div class="chat-messages" id="chatMessages">
                    <div class="message system">
                        <div class="message-content">
                            <i class="fas fa-robot"></i>
                            <p>您好！我是 AI 助手，请问有什么可以帮您？</p>
                        </div>
                    </div>
                </div>
                <div class="chat-input">
                    <textarea id="aiInput" placeholder="输入您的问题..." rows="3"></textarea>
                    <button id="sendMessage" class="send-btn" title="发送消息">
                        <i class="fas fa-paper-plane"></i>
                    </button>
                </div>
                <div class="chat-options">
                    <button class="option-btn" data-action="clear-chat" title="清空对话">
                        <i class="fas fa-trash"></i> 清空对话
                    </button>
                    <button class="option-btn" data-action="copy-last" title="复制最后回复">
                        <i class="fas fa-copy"></i> 复制回复
                    </button>
                </div>
            </div>
        </div>

        <!-- 翻译工具 -->
        <div class="tool-section" id="translation">
            <div class="translation-tool">
                <div class="translation-container">
                    <div class="translation-box">
                        <select id="sourceLang" class="language-select"></select>
                        <textarea id="sourceText" placeholder="请输入要翻译的文本..."></textarea>
                    </div>
                    <div class="translation-box">
                        <select id="targetLang" class="language-select"></select>
                        <textarea id="targetText" placeholder="翻译结果将显示在这里..." readonly></textarea>
                    </div>
                </div>
                
                <div class="translation-controls">
                    <div class="translation-buttons">
                        <button class="translation-btn translate-btn">
                            <i class="fas fa-language"></i>
                            翻译
                        </button>
                        <button class="translation-btn swap-lang-btn">
                            <i class="fas fa-exchange-alt"></i>
                            交换语言
                        </button>
                        <button class="translation-btn clear-text-btn">
                            <i class="fas fa-eraser"></i>
                            清空
                        </button>
                        <button class="translation-btn copy-translation-btn">
                            <i class="fas fa-copy"></i>
                            复制译文
                        </button>
                    </div>
                </div>
                
                <div class="translation-history">
                    <div style="display:flex;align-items:center;justify-content:space-between;">
                        <h3>翻译历史</h3>
                        <button class="clear-btn" id="clearTranslationHistory" title="清除翻译历史">
                            <i class="fas fa-trash"></i> 清除历史
                        </button>
                    </div>
                    <ul id="translationHistory" class="history-list"></ul>
                </div>
            </div>
        </div>

        <!-- 小游戏工具 -->
        <div class="tool-section" id="games">
            <div class="section-header">
                <h2><i class="fas fa-gamepad"></i> 小游戏</h2>
                <p class="section-description">经典小游戏合集，点击下方按钮选择游戏</p>
            </div>
            <div class="games-selector">
                <button class="game-btn" data-game="snake">贪吃蛇</button>
                <button class="game-btn" data-game="2048">2048</button>
                <button class="game-btn" data-game="tetris">俄罗斯方块</button>
            </div>
            <div id="gameContainer" class="game-container"></div>
        </div>

        <!-- 实用工具区 -->
        <div class="tool-section" id="tools">
            <div class="section-header">
                <h2><i class="fas fa-toolbox"></i> 实用工具</h2>
                <p class="section-description">常用小工具合集，提升你的效率</p>
            </div>
            <div class="tools-selector" style="display:flex;gap:1rem;justify-content:center;margin-bottom:1.5rem;">
                <button class="tool-mini-btn active" data-mini="clock">世界时钟</button>
                <button class="tool-mini-btn" data-mini="timer">计时器</button>
                <button class="tool-mini-btn" data-mini="imgcompress">图片压缩</button>
                <button class="tool-mini-btn" data-mini="markdown">Markdown预览</button>
                <button class="tool-mini-btn" data-mini="password">密码生成</button>
                <button class="tool-mini-btn" data-mini="encrypt">加密解密</button>
                <button class="tool-mini-btn" data-mini="hash">哈希计算</button>
                <button class="tool-mini-btn" data-mini="regex">正则测试</button>
                <button class="tool-mini-btn" data-mini="json">JSON格式化</button>
            </div>
            <div id="miniToolContainer">
                <div class="mini-tool" id="mini-clock"></div>
                <div class="mini-tool" id="mini-timer" style="display:none;">
                    <div class="timer-container">
                        <div class="timer-modes">
                            <button class="mode-btn active" data-mode="countdown">倒计时</button>
                            <button class="mode-btn" data-mode="stopwatch">秒表</button>
                        </div>
                        <div class="countdown-section">
                            <div class="time-input">
                                <input type="number" id="hours" min="0" max="99" value="0" placeholder="时">
                                <span>:</span>
                                <input type="number" id="minutes" min="0" max="59" value="0" placeholder="分">
                                <span>:</span>
                                <input type="number" id="seconds" min="0" max="59" value="0" placeholder="秒">
                            </div>
                            <div class="timer-display">00:00:00</div>
                            <div class="timer-controls">
                                <button class="timer-btn start-btn">
                                    <i class="fas fa-play"></i> 开始
                                </button>
                                <button class="timer-btn pause-btn" style="display:none;">
                                    <i class="fas fa-pause"></i> 暂停
                                </button>
                                <button class="timer-btn reset-btn">
                                    <i class="fas fa-redo"></i> 重置
                                </button>
                            </div>
                        </div>
                        <div class="stopwatch-section" style="display:none;">
                            <div class="timer-display">00:00:00</div>
                            <div class="lap-times"></div>
                            <div class="timer-controls">
                                <button class="timer-btn start-btn">
                                    <i class="fas fa-play"></i> 开始
                                </button>
                                <button class="timer-btn pause-btn" style="display:none;">
                                    <i class="fas fa-pause"></i> 暂停
                                </button>
                                <button class="timer-btn lap-btn">
                                    <i class="fas fa-flag"></i> 计次
                                </button>
                                <button class="timer-btn reset-btn">
                                    <i class="fas fa-redo"></i> 重置
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="mini-tool" id="mini-imgcompress" style="display:none;">
                    <div class="img-compress">
                        <div class="img-input">
                            <div class="img-drop-zone" id="imgDropZone">
                                <i class="fas fa-cloud-upload-alt"></i>
                                <p>拖放图片到此处或点击上传</p>
                                <input type="file" id="imgInput" accept="image/*" style="display:none;">
                            </div>
                        </div>
                        <div class="img-settings">
                            <div class="setting-group">
                                <label>压缩质量</label>
                                <input type="range" id="qualitySlider" min="0" max="100" value="80">
                                <span id="qualityValue">80%</span>
                            </div>
                            <div class="setting-group">
                                <label>最大尺寸</label>
                                <input type="number" id="maxWidth" placeholder="宽度" value="1920">
                                <span>x</span>
                                <input type="number" id="maxHeight" placeholder="高度" value="1080">
                            </div>
                        </div>
                        <div class="img-preview">
                            <div class="preview-container">
                                <div class="preview-original">
                                    <h4>原图</h4>
                                    <img id="originalPreview">
                                    <div class="img-info" id="originalInfo"></div>
                                </div>
                                <div class="preview-compressed">
                                    <h4>压缩后</h4>
                                    <img id="compressedPreview">
                                    <div class="img-info" id="compressedInfo"></div>
                                </div>
                            </div>
                            <button id="downloadCompressed" class="tool-btn" style="display:none;">
                                <i class="fas fa-download"></i> 下载压缩图片
                            </button>
                        </div>
                    </div>
                </div>
                <div class="mini-tool" id="mini-markdown" style="display:none;">
                    <div class="markdown-editor">
                        <div class="editor-container">
                            <div class="editor-input">
                                <textarea id="markdownInput" placeholder="输入Markdown文本..."></textarea>
                            </div>
                            <div class="editor-preview">
                                <div id="markdownPreview" class="markdown-preview"></div>
                            </div>
                        </div>
                        <div class="editor-toolbar">
                            <button class="tool-btn" data-action="bold" title="粗体">
                                <i class="fas fa-bold"></i>
                            </button>
                            <button class="tool-btn" data-action="italic" title="斜体">
                                <i class="fas fa-italic"></i>
                            </button>
                            <button class="tool-btn" data-action="heading" title="标题">
                                <i class="fas fa-heading"></i>
                            </button>
                            <button class="tool-btn" data-action="link" title="链接">
                                <i class="fas fa-link"></i>
                            </button>
                            <button class="tool-btn" data-action="list" title="列表">
                                <i class="fas fa-list-ul"></i>
                            </button>
                            <button class="tool-btn" data-action="code" title="代码">
                                <i class="fas fa-code"></i>
                            </button>
                            <button class="tool-btn" data-action="preview" title="预览">
                                <i class="fas fa-eye"></i>
                            </button>
                        </div>
                    </div>
                </div>
                <div class="mini-tool" id="mini-password" style="display:none;">
                    <div class="password-generator">
                        <div class="password-settings">
                            <div class="setting-group">
                                <label>密码长度</label>
                                <input type="range" id="passwordLength" min="4" max="32" value="12">
                                <span id="lengthValue">12</span>
                            </div>
                            <div class="setting-group">
                                <label>
                                    <input type="checkbox" id="includeUppercase" checked>
                                    包含大写字母
                                </label>
                                <label>
                                    <input type="checkbox" id="includeLowercase" checked>
                                    包含小写字母
                                </label>
                                <label>
                                    <input type="checkbox" id="includeNumbers" checked>
                                    包含数字
                                </label>
                                <label>
                                    <input type="checkbox" id="includeSymbols" checked>
                                    包含特殊字符
                                </label>
                            </div>
                        </div>
                        <div class="password-result">
                            <input type="text" id="generatedPassword" readonly>
                            <button class="copy-btn" title="复制密码">
                                <i class="fas fa-copy"></i>
                            </button>
                            <button class="refresh-btn" title="重新生成">
                                <i class="fas fa-sync-alt"></i>
                            </button>
                        </div>
                        <div class="password-strength">
                            <div class="strength-meter">
                                <div class="strength-bar"></div>
                            </div>
                            <span class="strength-text">密码强度：中等</span>
                        </div>
                    </div>
                </div>
                <div class="mini-tool" id="mini-encrypt" style="display:none;">
                    <div class="encryption-tool">
                        <div class="encryption-mode">
                            <button class="mode-btn active" data-mode="encrypt">加密</button>
                            <button class="mode-btn" data-mode="decrypt">解密</button>
                        </div>
                        <div class="encryption-input">
                            <textarea id="encryptInput" placeholder="输入要加密/解密的文本..."></textarea>
                        </div>
                        <div class="encryption-settings">
                            <div class="setting-group">
                                <label>加密方式</label>
                                <select id="encryptionMethod">
                                    <option value="aes">AES</option>
                                    <option value="base64">Base64</option>
                                    <option value="caesar">凯撒密码</option>
                                </select>
                            </div>
                            <div class="setting-group" id="keyGroup">
                                <label>密钥</label>
                                <input type="password" id="encryptionKey" placeholder="输入密钥">
                            </div>
                        </div>
                        <div class="encryption-result">
                            <textarea id="encryptOutput" readonly placeholder="加密/解密结果将显示在这里..."></textarea>
                            <button class="copy-btn" title="复制结果">
                                <i class="fas fa-copy"></i>
                            </button>
                        </div>
                    </div>
                </div>
                <div class="mini-tool" id="mini-hash" style="display:none;">
                    <div class="hash-calculator">
                        <div class="hash-input">
                            <textarea id="hashInput" placeholder="输入要计算哈希值的文本..."></textarea>
                            <div class="file-input">
                                <input type="file" id="hashFile" style="display:none;">
                                <button class="file-btn">
                                    <i class="fas fa-file"></i> 选择文件
                                </button>
                            </div>
                        </div>
                        <div class="hash-settings">
                            <div class="setting-group">
                                <label>哈希算法</label>
                                <select id="hashAlgorithm">
                                    <option value="md5">MD5</option>
                                    <option value="sha1">SHA-1</option>
                                    <option value="sha256">SHA-256</option>
                                    <option value="sha512">SHA-512</option>
                                </select>
                            </div>
                        </div>
                        <div class="hash-result">
                            <input type="text" id="hashOutput" readonly>
                            <button class="copy-btn" title="复制哈希值">
                                <i class="fas fa-copy"></i>
                            </button>
                        </div>
                    </div>
                </div>
                <div class="mini-tool" id="mini-regex" style="display:none;">
                    <div class="regex-tester">
                        <div class="regex-input">
                            <div class="input-group">
                                <label>正则表达式</label>
                                <input type="text" id="regexPattern" placeholder="输入正则表达式...">
                            </div>
                            <div class="input-group">
                                <label>测试文本</label>
                                <textarea id="regexText" placeholder="输入要测试的文本..."></textarea>
                            </div>
                        </div>
                        <div class="regex-settings">
                            <div class="setting-group">
                                <label>
                                    <input type="checkbox" id="globalMatch" checked>
                                    全局匹配
                                </label>
                                <label>
                                    <input type="checkbox" id="caseInsensitive">
                                    忽略大小写
                                </label>
                                <label>
                                    <input type="checkbox" id="multiline">
                                    多行模式
                                </label>
                            </div>
                        </div>
                        <div class="regex-result">
                            <div class="result-header">
                                <h4>匹配结果</h4>
                                <span id="matchCount">0 个匹配</span>
                            </div>
                            <div id="matchResults" class="match-results"></div>
                        </div>
                    </div>
                </div>
                <div class="mini-tool" id="mini-json" style="display:none;">
                    <div class="json-formatter">
                        <div class="json-input">
                            <textarea id="jsonInput" placeholder="输入JSON文本..."></textarea>
                        </div>
                        <div class="json-actions">
                            <button class="format-btn" title="格式化">
                                <i class="fas fa-code"></i> 格式化
                            </button>
                            <button class="minify-btn" title="压缩">
                                <i class="fas fa-compress-alt"></i> 压缩
                            </button>
                            <button class="validate-btn" title="验证">
                                <i class="fas fa-check"></i> 验证
                            </button>
                            <button class="copy-btn" title="复制">
                                <i class="fas fa-copy"></i> 复制
                            </button>
                        </div>
                        <div class="json-result">
                            <pre id="jsonOutput"></pre>
                        </div>
                        <div class="json-status">
                            <span id="jsonStatus"></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 关于我们 -->
        <div class="tool-section" id="about">
            <div class="section-header">
                <h2><i class="fas fa-info-circle"></i> 关于我们</h2>
                <p class="section-description">了解我们的故事和使命</p>
            </div>
            <div class="about-content">
                <div class="about-section">
                    <h3><i class="fas fa-rocket"></i> 我们的使命</h3>
                    <p>我们致力于为用户提供一站式在线工具平台，通过整合各种实用工具，帮助用户提高工作效率，简化日常任务。我们的目标是让每个人都能轻松使用专业工具，无需安装任何软件。</p>
                </div>
                <div class="about-section">
                    <h3><i class="fas fa-star"></i> 我们的特色</h3>
                    <ul class="feature-list">
                        <li><i class="fas fa-check"></i> 完全免费使用，无需注册</li>
                        <li><i class="fas fa-check"></i> 界面简洁直观，操作便捷</li>
                        <li><i class="fas fa-check"></i> 支持深色模式，保护视力</li>
                        <li><i class="fas fa-check"></i> 响应式设计，支持各种设备</li>
                        <li><i class="fas fa-check"></i> 数据本地存储，保护隐私</li>
                        <li><i class="fas fa-check"></i> 持续更新，不断优化</li>
                    </ul>
                </div>
                <div class="about-section">
                    <h3><i class="fas fa-tools"></i> 工具集</h3>
                    <div class="tools-grid">
                        <div class="tool-card">
                            <i class="fas fa-exchange-alt"></i>
                            <h4>单位换算</h4>
                            <p>支持长度、温度、重量等多种单位换算</p>
                        </div>
                        <div class="tool-card">
                            <i class="fas fa-calculator"></i>
                            <h4>计算器</h4>
                            <p>基础运算、百分比计算等功能</p>
                        </div>
                        <div class="tool-card">
                            <i class="fas fa-calendar-alt"></i>
                            <h4>日期计算</h4>
                            <p>日期差计算、工作日统计等</p>
                        </div>
                        <div class="tool-card">
                            <i class="fas fa-palette"></i>
                            <h4>颜色工具</h4>
                            <p>颜色选择、格式转换和配色方案</p>
                        </div>
                        <div class="tool-card">
                            <i class="fas fa-font"></i>
                            <h4>文本工具</h4>
                            <p>文本格式转换、统计和编辑</p>
                        </div>
                        <div class="tool-card">
                            <i class="fas fa-robot"></i>
                            <h4>AI 助手</h4>
                            <p>智能问答系统，专业解答</p>
                        </div>
                        <div class="tool-card">
                            <i class="fas fa-language"></i>
                            <h4>翻译工具</h4>
                            <p>多语言翻译，支持多种语言</p>
                        </div>
                        <div class="tool-card">
                            <i class="fas fa-gamepad"></i>
                            <h4>小游戏</h4>
                            <p>经典游戏合集，休闲娱乐</p>
                        </div>
                    </div>
                </div>
                <div class="about-section">
                    <h3><i class="fas fa-envelope"></i> 联系我们</h3>
                    <p>如果您有任何建议或反馈，欢迎通过以下方式联系我们：</p>
                    <div class="contact-info">
                        <a href="mailto:1109896965@qq.com" class="contact-link">
                            <i class="fas fa-envelope"></i> 1109896965@qq.com
                        </a>
                        <a href="https://gitee.com/mattjim" class="contact-link" target="_blank">
                            <i class="fab fa-git"></i> Gitee
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="floating-info">
        <div class="info-content">
            <i class="fas fa-info-circle"></i>
            <span>货币汇率每5分钟自动更新</span>
        </div>
    </div>

    <!-- 左侧作者信息悬浮窗 -->
    <div class="floating-author left-author-info">
        <div class="author-content">
            <i class="fas fa-user"></i>
            <span>作者：垚垚 <br>学号24219192253</span>
        </div>
        <img src="./img/wx.jpg" alt="微信收款码" class="pay-code-img" style="margin-top:0.7rem;max-width:120px;border-radius:0.7rem;box-shadow:0 2px 8px rgba(0,0,0,0.08);">
        <div class="pay-tip">制作不易，感谢支持！</div>
        <button class="close-author-btn" title="关闭作者信息">&times;</button>
    </div>
    <!-- 右侧作者信息悬浮窗 -->
    <div class="floating-author right-author-info">
        <div class="author-content">
            <i class="fas fa-user"></i>
            <span>作者：垚垚<br>学号24219192253</span>
        </div>
        <img src="./img/zfb.jpg" alt="支付宝收款码" class="pay-code-img" style="margin-top:0.7rem;max-width:120px;border-radius:0.7rem;box-shadow:0 2px 8px rgba(0,0,0,0.08);">
        <div class="pay-tip">制作不易，感谢支持！</div>
        <button class="close-author-btn" title="关闭作者信息">&times;</button>
    </div>

    <script src="script.js"></script>
</body>
</html> 